import { PlusOutlined, EditOutlined, DeleteOutlined } from '@/utils/icons';
import React, { useState } from 'react';
import { Table, Button, Space, Modal, Form, Input, Select, DatePicker, message, Tag } from 'antd';

import dayjs from 'dayjs';

const { Option } = Select;
const { TextArea } = Input;

export default function ProjectRisks({ risks, onRisksChange }) {
  const [modalVisible, setModalVisible] = useState(false);
  const [editingRisk, setEditingRisk] = useState(null);
  const [form] = Form.useForm();

  const handleAdd = () => {
    setEditingRisk(null);
    form.resetFields();
    setModalVisible(true);
  };

  const handleEdit = (record) => {
    setEditingRisk(record);
    form.setFieldsValue({
      ...record,
      riskDate: record.riskDate ? dayjs(record.riskDate) : null,
    });
    setModalVisible(true);
  };

  const handleDelete = (id) => {
    const newRisks = risks.filter(risk => risk.id !== id);
    onRisksChange(newRisks);
  };

  const handleSubmit = (values) => {
    if (editingRisk) {
      const newRisks = risks.map(risk => 
        risk.id === editingRisk.id ? { ...risk, ...values, riskDate: values.riskDate.format('YYYY-MM-DD') } : risk
      );
      onRisksChange(newRisks);
      message.success('更新成功');
    } else {
      const newRisk = {
        id: Date.now(),
        ...values,
        riskDate: values.riskDate.format('YYYY-MM-DD')
      };
      onRisksChange([...risks, newRisk]);
      message.success('添加成功');
    }
    setModalVisible(false);
  };

  const getRiskLevelColor = (level) => {
    const colorMap = {
      '低': 'green',
      '中': 'orange',
      '高': 'red'
    };
    return colorMap[level] || 'default';
  };

  const getRiskStatusColor = (status) => {
    const colorMap = {
      '待处理': 'orange',
      '处理中': 'blue',
      '已解决': 'green',
      '已关闭': 'gray'
    };
    return colorMap[status] || 'default';
  };

  const columns = [
    {
      title: '风险描述',
      dataIndex: 'description',
      key: 'description',
      width: 200,
    },
    {
      title: '风险等级',
      dataIndex: 'level',
      key: 'level',
      render: (level) => <Tag color={getRiskLevelColor(level)}>{level}</Tag>,
    },
    {
      title: '风险类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '发现日期',
      dataIndex: 'riskDate',
      key: 'riskDate',
    },
    {
      title: '负责人',
      dataIndex: 'owner',
      key: 'owner',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => <Tag color={getRiskStatusColor(status)}>{status}</Tag>,
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button type="link" icon={<EditOutlined />} size="small" onClick={() => handleEdit(record)}>
            编辑
          </Button>
          <Button type="link" icon={<DeleteOutlined />} size="small" danger onClick={() => handleDelete(record.id)}>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
          添加风险
        </Button>
      </div>

      <Table
        columns={columns}
        dataSource={risks}
        rowKey="id"
        pagination={false}
        size="small"
        scroll={{ x: 800 }}
      />

      <Modal
        title={editingRisk ? '编辑风险' : '添加风险'}
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        onOk={() => form.submit()}
        width={600}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
        >
          <Form.Item
            name="description"
            label="风险描述"
            rules={[{ required: true, message: '请输入风险描述' }]}
          >
            <TextArea rows={3} />
          </Form.Item>

          <Form.Item
            name="level"
            label="风险等级"
            rules={[{ required: true, message: '请选择风险等级' }]}
          >
            <Select>
              <Option value="低">低</Option>
              <Option value="中">中</Option>
              <Option value="高">高</Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="type"
            label="风险类型"
            rules={[{ required: true, message: '请选择风险类型' }]}
          >
            <Select>
              <Option value="技术风险">技术风险</Option>
              <Option value="进度风险">进度风险</Option>
              <Option value="成本风险">成本风险</Option>
              <Option value="质量风险">质量风险</Option>
              <Option value="人员风险">人员风险</Option>
              <Option value="其他">其他</Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="riskDate"
            label="发现日期"
            rules={[{ required: true, message: '请选择发现日期' }]}
          >
            <DatePicker style={{ width: '100%' }} />
          </Form.Item>

          <Form.Item
            name="owner"
            label="负责人"
            rules={[{ required: true, message: '请输入负责人' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="status"
            label="状态"
            rules={[{ required: true, message: '请选择状态' }]}
          >
            <Select>
              <Option value="待处理">待处理</Option>
              <Option value="处理中">处理中</Option>
              <Option value="已解决">已解决</Option>
              <Option value="已关闭">已关闭</Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="mitigation"
            label="缓解措施"
          >
            <TextArea rows={3} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
